Hello, 我是 Weber,一位工程師,斜槓鼓手與行銷顧問。
Rails 開發,每日一套件第7天,跟著我一起走完這段旅程,建立出自己的常用套件庫吧!
讓我們循序漸進,輕鬆認識 Rails 開發好用的 30 個套件。
今天要講的是號稱全 Rack 應用都能用,從 Sinatra 到 Rails,支援各式CSS主流框架、也可以用昨天才介紹的 ransack,最快最輕薄最簡單最有效的分頁套件!
真有這麼猛!? 老實說,本人沒有真的實測過,不過它的官方文件敢吹成這樣,用的人數夠多,而且一直有持續在更新(寫這篇時,兩天前才更新一次),我認為有它的道理在。
講這麼多廢話,Pagy 到底是幹嘛用的。 一張圖片講完:
引用自pagy文件
就是分頁功能。
一樣的,其實也可以自己寫,應該不算難寫,IThome的TA們,大概心中都有個概念吧。不過工程師都是很懶的,有人寫好了我幹嘛還要再去寫一遍(除非你是在練兵、練手啦)。這種分頁功能,在多種網站都可以用到,尤其電商、部落格、討論區呀等,大量資料型態的網頁,都會用到。我們就來實作吧!
一樣老招先上,我都開始覺得這段,跟我的開頭聲明,應該可以寫個什麼自己跑了 XD。
bundle add pagy
接著在 config/initializers
中創建一個 pagy.rb
檔案,用來設定 pagy 的參數。
文件中有250行的介紹,其實都不算難懂,不一一囉說了,主要介紹幾個一定會用到的設定。
Pagy::DEFAULT[:page] = 1
預設當前頁為1,一般不會動,不過列出來等等當參考用。
Pagy::DEFAULT[:items] = 20
一頁會有幾個 items,預設是20,數量自己改。
Pagy::DEFAULT[:size] = [1,4,4,1]
size 預設是[1,4,4,1],意思是會顯示 1 個頁首,當前頁的前 4 頁跟後 4 頁,最後顯示 1 個頁尾。
是不是有點難理解,官方舉了個例子
pagy = Pagy.new count:1000, page: 10, size: [3,4,4,3] # etc
pagy.series
#=> [1, 2, 3, :gap, 6, 7, 8, 9, "10", 11, 12, 13, 14, :gap, 48, 49, 50]
翻譯翻譯~
簡單來說,count:1000 個 items。
items沒寫,預設是 20 個一頁,所以會有50頁。
page 定在第10頁。
size: [3,4,4,3]
最前面的 1~3 頁
當前頁(10頁)的前四頁 6~9 頁
當前頁(10頁)的後四頁 11~14 頁
最後面的 48~50頁
在要使用的 Controller 中則寫入 include Pagy::Backend
action 用 @pagy, @records = pagy(Product.some_scope)
寫成 helper 的方式 include Pagy::Frontend
然後 partial render 出來。
<%== render partial: 'pagy/nav', locals: {pagy: @pagy} %>
其實基礎大概就這樣了。
它另外還有很多變形的型態,還可以搭配 css 跟 js 等,甚至變成日曆的形式。
就讓各位自己試玩了,總之必收套件收起來。
我們明天見!